<template>
	<view class="container">
		<view class="top-img">
			<image :src="$img_path('/course/pay_s.png')" mode="widthFix"></image>
			<view class="text">
				<text>支付成功</text>
				<text>¥ 100.00</text>
			</view>
		</view>
		<view class="info">
			<view class="item">
				<text>订单编号</text>
				<view class="content">
					123456789123456789
				</view>
			</view>
			<view class="item">
				<text>付款时间</text>
				<view class="content">
					2024-05-15 14:00:00
				</view>
			</view>
			<view class="item">
				<text>支付方式</text>
				<view class="content">
					微信支付
				</view>
			</view>
		</view>
		
		<view class="btn">
			<button class="look">查看</button>
			<button class="home">返回首页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.container{
	.top-img{
		padding: 104rpx 0 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 200rpx;
			height: 200rpx;
		}
		.text{
			display: flex;
			flex-direction: column;
			align-items: center;
			text:nth-child(1){
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				margin-top: 30rpx;
			}
			text:nth-child(2){
				font-weight: bold;
				font-size: 48rpx;
				color: #E72A2A;
				line-height: 66rpx;
				margin-top: 4rpx;
			}
		}
	}
	.info{
		padding: 60rpx 22rpx 0;
		box-sizing: border-box;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:not(:first-child){
				margin-top: 24rpx;
			}
			&>text{
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
			}
			&>view{
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
			}
		}
	}
	
	.btn{
		padding: 0 22rpx;
		box-sizing: border-box;
		margin-top: 100rpx;
		button{
			width: 100%;
			height: 96rpx;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-weight: bold;
			font-size: 36rpx;
			line-height: 96rpx;
		}
		.look{
			color: #FFFFFF;
			background: linear-gradient( 132deg, #FFA233 0%, #FB4C4C 100%);
		}
		.home{
			color: #333333;
			background: #F8F8F8;
			margin-top: 20rpx;
		}
	}
}
</style>
